<!-- 创建、修改任务-->
<template>
  <Modal
    v-model="modal.show"
    :title="modal.title"
    :loading="modal.loading"
    :mask-closable="false"
    @on-ok="saveTask"
    @on-cancel="closeModal"
    :width="modal.width"
  >
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <FormItem label="类别" prop="category">
        <Input v-model.trim="formValidate.category" placeholder="请输入类别"></Input>
      </FormItem>
      <FormItem label="类型" prop="mold">
        <Input v-model.trim="formValidate.mold" placeholder="请输入类型"></Input>
      </FormItem>
      <FormItem label="靶标类别" prop="targetType" v-if="sceneType == 5">
        <Select filterable v-model="formValidate.targetType" placeholder="请选择靶标类别">
          <Option v-for="item in categoryArr" :key="item.value" :value="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="针对方" prop="contrapose" v-if="sceneType == 5 && typeExcel !== 11">
        <Select filterable v-model="formValidate.contrapose" placeholder="请选择针对方">
          <!-- <Option v-for="item in contraposeArr" :key="item.value" :value="item.value">
            {{ item }}
          </Option> -->
          <Option  value="1" v-if="typeExcel !== 11">防守方</Option>
          <Option  value="2">攻击方</Option>
        </Select>
      </FormItem>
      <!-- <FormItem label="加减分" prop="subScore">
        <Select filterable v-model="formValidate.subScore" placeholder="请选择加减分">
          <Option v-for="item in subScoreArr" :key="item.value" :value="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem> -->
      <FormItem label="危险等级" prop="grade">
        <Select filterable v-model="formValidate.grade" placeholder="请选择危险等级">
          <Option v-for="item in dangerLevelObj" :key="item.value" :value="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="计分方式" prop="way" v-if="sceneType == 5">
        <Select filterable v-model="formValidate.way" placeholder="请选择计分方式">
          <Option v-for="item in wayArr" :key="item.value" :value="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="是否下线" prop="line" v-if="sceneType == 5">
        <Select filterable placeholder="是否下线" v-model="formValidate.line">
          <Option :value="item.value" v-for="item in booleanArr" :key="item.value">{{
            item.label
          }}</Option>
        </Select>
      </FormItem>
      <FormItem label="分值" prop="score">
        <InputNumber
          v-model.trim="formValidate.score"
          :min="0"
          :max="100000"
          placeholder="请输入分值"
        ></InputNumber>
      </FormItem>
      <FormItem label="描述" prop="description">
        <Input
          v-model.trim="formValidate.description"
          type="textarea"
          :maxlength="200"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="请输入描述"
        ></Input>
      </FormItem>
    </Form>
  </Modal>
</template>
<script>
import { validateName } from '@/libs/reg';
import { updateHWScoreRule, addHWScoreRule } from '@/api/drill_compete.js';
import { scoreRuleMixin, categoryMixin } from '../mixins';
export default {
  name: 'EditModal',
  props: ['sceneId','sceneType','typeExcel'],
  mixins: [scoreRuleMixin, categoryMixin],
  data() {
    const validateScore = (rule, value, callback) => {
      if (value !== 0 && !value) {
        callback();
        // new Error('不能为空')
        return;
      }
      if (!Number.isInteger(value)) {
        callback(new Error('请输入整数'));
        return;
      }
      if (value < 0 || value > 100000) {
        callback(new Error('请输入0-100000的整数'));
        return;
      }
      callback();
    };
    return {
      modal: {
        show: this.value,
        title: '创建任务',
        loading: true,
        width: 500
      },
      formValidate: {
        category: '',
        contrapose: this.typeExcel !== 11 ?'2':'',
        description: '',
        grade: '',
        id: '',
        mold: '',
        sceneId: this.sceneId,
        score: 0,
        subScore: '',
        targetType: '',
        way: '',
        line: 0
      },
      ruleValidate: {
        category: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          },
          {
            min:1,
            max:200,
            message:"不能超过200个字符",
            trigger: 'change'
          }
        ],
        contrapose: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          }
        ],
        // grade: [
        //   {
        //     required: true,
        //     message: '不能为空',
        //     trigger: 'change'
        //   }
        // ],
        mold: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          },
          {
            min:1,
            max:200,
            message:"不能超过200个字符",
            trigger: 'change'
          }
        ],
        sceneId: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          }
        ],
        score: [
          //   { type: 'number', required: true, message: '请输入分数', trigger: 'change' },
          // { type: 'number', min: 0, message: '不能为空', trigger: 'change' },
          { validator: validateScore, trigger: 'change' }
        ],
        subScore: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          }
        ],
        // targetType: [
        //   {
        //     required: true,
        //     message: '不能为空',
        //     trigger: 'change'
        //   }
        // ],
        way: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          }
        ],
        description: [{ max: 200, message: '描述长度不能超过200个字符', trigger: 'blur' }]
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    if(this.sceneType == 7){ // 综合演练，默认必填字段
      this.formValidate.contrapose  = '2';
      this.formValidate.way = 'hand';
    }
    this._formValidate = { ...this.formValidate };
  },
  methods: {
    saveTask() {
      this.$refs.formValidate
        .validate((valid) => {
          if (valid) {
            let params = {
              ...this.formValidate,
              line: this.formValidate.line ? true : false
              // score: this.formValidate.score ? this.formValidate.score : 0
            };
            let reqApi = '';
            if (this.type === 'update') {
              reqApi = updateHWScoreRule(this.formValidate.id, params);
            } else {
              reqApi = addHWScoreRule(params);
            }
            //修改任务
            reqApi
              .then(({ code, data, message }) => {
                if (code == 1) {
                  this.$Message.info(this.modal.title + '成功');
                  this.closeModal();
                  this.$emit('ok', this.type);
                } else {
                  this.$Message.error(message);
                }
              })
              .catch((e) => {
                this.$Message.error(this.modal.title + '失败');
              })
              .finally(() => {
                this.cancelLoading();
              });
          } else {
            this.cancelLoading();
          }
        })
        .catch((error) => {
          this.cancelLoading();
        });
    },
    initData() {
      this.formValidate = { ...this._formValidate };
    },
    resetField() {
      this.initData();
      this.$refs.formValidate.resetFields();
    },
    showModal(data) {
      this.type = data ? 'update' : 'add';
      this.modal.show = true;
      if (this.type == 'update') {
        this.modal.title = '修改计分规则';
        this.formValidate = { ...this._formValidate, ...data, line: data.line ? 1 : 0 };
      } else {
        this.modal.title = '添加计分规则';
        this.initData();
      }
    },
    closeModal() {
      this.modal.show = false;
      this.$emit('close');
      this.resetField();
    },
    cancelLoading() {
      this.modal.loading = false;
      setTimeout(() => {
        this.modal.loading = true;
      });
    }
  }
};
</script>
<style scoped></style>
